<template>
  <el-card>
    <el-table :data="tableList" style="width: 100%" border>
      <el-table-column type="index" />
      <el-table-column prop="authName" label="权限名称" />
      <el-table-column prop="path" label="路径" />
      <el-table-column label="权限等级">
        <template v-slot="{ row }">
          <el-tag
            :type="
              row.level && row.level === '0'
                ? 'plain'
                : row.level === '1'
                  ? 'success'
                  : 'warning'
            "
          >
            {{
              row.level && row.level === '0'
                ? '一级'
                : row.level === '1'
                  ? '二级'
                  : '三级'
            }}</el-tag>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import { treeList } from '@/api/tree'
export default {
  name: 'Tree',
  components: {},
  props: {},
  data() {
    return {
      tableList: [],
      plain: 'success' // 控制标签显示
    }
  },
  computed: {}, // 计算属性
  watch: {},
  created() {
    this.treeList()
  },
  mounted() {},
  methods: {
    async treeList() {
      const { data } = await treeList()
      this.tableList = data.data
    }
  }
}
</script>

<style scoped></style>
